<template>
	<div class="shoppingcart">
		<van-nav-bar title="购物车" right-text="编辑"  @click-right="onClickRight">
		</van-nav-bar>
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">

			<div v-show="isShow" class="shoppingcart_border">
				
				<div class="shoppingcart_border_shop">

					<van-checkbox @click="checkAll" v-model="ischeckAll" icon-size="16px"  style="padding: 10px 0 10px 15px;">
						<div class="sbs_name">咚咚哒哒美食店</div>
					</van-checkbox>

				</div>
				<van-checkbox-group v-model="checked">
				<div class="shopping_box" v-for="sp in shoppingCart">
					<div>
						<van-checkbox :name="sp"  icon-size="16px" />
					</div>
					<div>
						<van-image fit="cover" radius="10px" width="4rem" height="4rem" 
						:src="`http://localhost:8080/res/${sp.food.food_img}`" style="margin: auto;" />
					</div>
					<div>
						<span>{{sp.food.food_name}}</span>
						<span>口味：{{sp.detail_attach}}</span>
						<span>x{{sp.food_amount}}</span>
					</div>
					<div>
						<span>&yen;{{sp.total_cost}}</span>
					</div>
				</div>
				</van-checkbox-group>
				
				<div v-show="isshoworder" class="shoppingcart_border_down">
					<span>总价：{{prices}}</span>
					<van-button type="primary" @click="submitOrder" color="linear-gradient(to right, #2885ff, #1084ff)" style=" margin-top:20px ;margin-left: 50%;">
						去结算</van-button>
				</div>
				
				<div v-show="isshowdele" class="shoppingcart_border_down">
					<span></span>
					<van-button type="primary" @click="deletecart" color="linear-gradient(to right, #ff491c, #ff0c40)" style="width: 70px; margin:10px 20px 20px 250px;">
						删除</van-button>
				</div>
				
			</div>
			
			<van-empty v-show="isEmpty" description="购物车为空哦~ 快去主页看看吧~" />

			<van-divider :style="{ color: '#aeaeae', borderColor: '#999999', padding: '0 16px' }">
				猜你喜欢</van-divider>

			<div class="recommends_card" >
				<div class="recommend" v-for="food in foodrecommend" @click="tofooddetail(food)">
					<div>
						<van-image fit="fill" radius="10px" width="173px" height="100px"
						:src="`http://localhost:8080/res/${food.food_img}`" />
					</div>
					
					<div>
						<div>{{food.food_name}}</div>
						<div>
							<span>&yen;{{food.food_price}}</span>
							<span>月售:{{food.food_kind_id}}</span>
						</div>
						<div>30分钟 | 免配送费</div>
					</div>
					
				</div>
				

			</div>
		</van-pull-refresh>
		
		
		<van-divider>到底啦~快去主页看看吧</van-divider>
		<div style="height: 50px;"></div>
		<Navtab></Navtab>
	</div>
</template>

<script>
	import ShoppingCartService from "./ShoppingCartService";
	import Navtab from "@/components/Navtab";
	import Vue from 'vue'
	import {
		Toast
	} from 'vant';
	export default {
		name: "ShoppingCart",
		inject:['reload'],
		data() {
			return {
				isshoworder:true,//显示总价
				isshowdele:false,//显示删除按钮
				ischeckAll:false,//是否全选
				checked: [],//选中的数据
				shoppingCart:[],//购物车中数据
				//isFood:false,//是否有食物
				isLoading: false,
				isEmpty:false,
				isShow:true,
				loginUser:'',//登录用户
				//url: 'https://img.yzcdn.cn/vant/cat.jpeg',
				foodrecommend:'',//菜品推荐列表
				recommend:{"pageNum":1,"pageSize":10,"orderBy":"food_price"}
			};
		},
		
		created() {
			Vue.axios.get(`http://localhost:8080/user/getlogin`).then(res => {
				this.loginUser = res.data.loginUser;
				//console.log(this.loginUser);
				if(!this.loginUser){
					this.isShow=false;
					this.isEmpty=true;
				}else{
					ShoppingCartService.showCart(res=>{
						//this.isFood=res.msg
						this.shoppingCart=res.cart.details;
						console.log(this.shoppingCart)
						if(this.shoppingCart.length==0){
							this.isEmpty=true;
							this.isShow=false;
						}else{
							console.log("购物车不空")
						}
						
					});
					
					// ShoppingCartService.showFoodMounth({food_id:1},res=>{
					// 	console.log(res)
					// })
							
				}
				ShoppingCartService.showFoodRecommend(this.recommend,res=>{
					this.foodrecommend=res.foodListByOrder.list
					console.log(this.foodrecommend)
				})
			});
			
			
			
		},
		
		watch:{
		　　checked(){
		　　　　if(this.checked.length==this.shoppingCart.length){
		　　　　　　this.ischeckAll=true;
		　　　　}else{
		　　　　　　this.ischeckAll=false;
		　　　　}
		　　}
		},
		methods: {
			tofooddetail(food){
				console.log(food)
				this.$router.push({
					name: 'FoodDetail',
					params:{
						food_id:food.food_id
					},
				});
			},
			/*订单提交跳转到下个页面
			*/
			submitOrder() {
				if(this.checked.length!=0){
					//计算每样被选中的商品明细的总价
					this.checked.forEach(detail=>{
						detail.total_cost=detail.food_amount*detail.food.food_price;
					});
					this.$router.push({
						name: 'Payment',
						params:{
							sel:this.checked,//选中的商品
							totalPrice:this.prices,//选中商品的总价
						},
					});
				}else{
					Toast('您未选择商品哦~');
				}
			},
			checkAll() {
				if(this.ischeckAll){
					console.log("全选")
					this.checked=[];
					this.shoppingCart.forEach(detail=>{
						this.checked.push(detail)
					})
					console.log(this.checked)
					this.ischeckAll=true;
					
				}else{
					console.log("全不选")
					this.checked=[];
					this.ischeckAll=false;
				}
			},
			deletecart(){
				let shoppingCartIdList = this.checked.map(obj=>{
					return obj.shopping_cart_detail_id;
				});
				console.log('删除购物车明细列表')
				console.log(shoppingCartIdList);
				ShoppingCartService.removeInService(shoppingCartIdList,r=>{
					console.log(r);
				});
				if(this.isshoworder){
					this.isshoworder=false;
					this.isshowdele=true;
				}else{
					this.isshowdele=false;
					this.isshoworder=true;
				}
				this.reload();
				//this.$router.go(0);
			},
			onClickRight() {
				if(this.isshoworder){
					this.isshoworder=false;
					this.isshowdele=true;
				}else{
					this.isshowdele=false;
					this.isshoworder=true;
				}
				
				//Toast('按钮');
			},
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
					//this.count++;
				}, 400);
			},
		},
		computed:{
			prices(){
				let total=0;
				if(this.checked.length)
				this.checked.forEach(detail=>{
					total+=detail.food_amount*detail.food.food_price;
				});
				return total;
			},
		},
		components: {
			Navtab
		},
	}
</script>


<style lang="less">
	.shoppingcart {
		overflow: auto;
		height: 100%;
		display: flex;
		flex-direction: column;

		.shoppingcart_border {
			margin: 10px;
			box-shadow: 0 2px 4px 0 rgba(164, 160, 159, 0.1), 0 0 6px rgba(130, 130, 125, 0.1);
			border-radius: 10px;
			background-color: white;

			//购物车边框
			.shoppingcart_border_shop {
				height: 30px;
				border-top-right-radius: 10px;
				border-top-left-radius: 10px;

				//background-color: #bfe1f0;
				.sbs_name {
					margin-left: 10px;
					font-size: 16px;
					line-height: 20px;
					color: #606266; //字体颜色
					font-weight: 400; //加粗
					letter-spacing: 1px;
				}
			}

			//购物车栏
			.shopping_box {
				height: 100px;
				background-color: white;
				margin: 10px;
				display: flex;

				div:nth-child(1) {
					//background-color: lightblue;
					margin: 15px 2px 15px 2px;
					display: flex;
					//margin: auto 0;
				}

				div:nth-child(2) {
					flex: 1;
					margin-left: 5px;
					//background-color: lightblue;
					display: flex;
				}

				div:nth-child(3) {
					flex: 4;
					display: flex;
					margin: 15px;
					flex-direction: column;
					justify-content: space-around;
					//background-color: lightcoral;
					text-align: left;

					>span {
						&:nth-child(1) {
							font-size: 16px;
							line-height: 16px;
							color: #303133; //字体颜色
							font-weight: 600; //加粗
							letter-spacing: 1px;
						}

						&:nth-child(2) {

							font-size: 14px;
							line-height: 16px;
							color: #606266; //字体颜色
							letter-spacing: 1px;
						}

						&:nth-child(3) {
							font-size: 14px;
							line-height: 16px;
							color: #606266; //字体颜色
							font-weight: 400; //加粗
							letter-spacing: 1px;
						}
					}
				}

				div:nth-child(4) {
					flex: 2;
					margin: 20px 15px 15px 0;
					text-align: right;

					>span {
						&:nth-child(1) {
							font-size: 18px;
							line-height: 18px;
							color: #4b4d50; //字体颜色
							font-weight: 600; //加粗
							letter-spacing: 1px;
						}
					}
				}
			}

			.shoppingcart_border_down {
				font-size: 18px;
				padding-bottom: 10px;
				margin-left: 20px;
			}

		}

		.recommends_card {
			display: flex;
			flex-wrap: wrap;
			
			
		}
		
		
		.recommend {
			height: 200px;
			width: 173px;
			margin-left: 10px;
			margin-bottom: 10px;
			border-radius: 10px;
			background-color: white;
			display: flex;
			flex-direction: column;
			>div{
				&:nth-child(1) {//放图片
					height: 100px;
					width: 173px;
					border-top-right-radius: 10px; //边框右上圆角
					border-top-left-radius: 10px;
					//background-color: lightblue;
				}		
				&:nth-child(2) {//下边内容
					height: 100px;
					width: 100%;
					>div{//菜品名称
						&:nth-child(1){
							margin: 10px;
							font-size: 16px;
							line-height: 18px;
							color: #303133;
							font-weight: 600; 
							letter-spacing: 1.5px;
						}
						&:nth-child(2){
							margin: 0 10px;
							>span{
								&:nth-child(1){
									font-size: 18px;
									line-height: 20px;
									color: #e00000;
									
									letter-spacing: 1.5px;
								}
								&:nth-child(2){
									margin: 0 10px;
									font-size: 14px;
									color: #606266; 
								}
							}
						}
						&:nth-child(3){
							margin: 10px 0 0 10px;
							font-size: 14px;
							color: #606266;
						}
					}
				}
			}
			
		}
	}
</style>
